<template>
  <q-page class="column row">
    <accounts-tabs
      v-model="data.tab"
      v-model:account="data.account"
      class="col-auto"
      badgeEllipsis
      :badges="data.counts"
    ></accounts-tabs>
    <q-separator />

    <div class="relative-position col">
      <template
        v-for="(acc, index) in $store.getters['persisted/accounts']"
        :key="index"
      >
        <webview
          v-show="data.tab === index"
          :ref="setImVebviewRef"
          src="https://supeicommunicate.zbj.com/seller"
          :partition="`persist:zbj_${acc.userid}`"
          class="full-width full-height absolute-top-left"
          style="vertical-align: top"
          nodeintegration
          :preload="data.preload"
        ></webview>
      </template>
    </div>
  </q-page>
</template>

<script>
import { dom } from "quasar";
import AccountsTabs from "src/components/AccountsTabs.vue";
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  components: { AccountsTabs },
  name: "PagesServerPageVue",
  setup() {
    const imVebviewRef = ref({});
    const $store = useStore();
    const $route = useRoute();

    const data = reactive({
      tab: 0,
      preload: window.electron.utils.preload,
      account: $store.getters["persisted/accounts"].find(
        (v) => v.userid == $route.query.id
      ),
      counts: computed(() => $store.state.common.serverMessageCount),
      bounds: computed(() => {
        let bounds = {
          x: 0,
          y: 0,
          width: 0,
          height: 0,
        };
        if (serverPanel.value) {
          const { top, left } = dom.offset(serverPanel.value);
          bounds = {
            x: left,
            y: top,
            width: dom.width(serverPanel.value),
            height: dom.height(serverPanel.value),
          };
        }
        return bounds;
      }),
    });

    const css = window.electron.utils.readPublicFile(
      "electron/into/server-im.css"
    );
    const js = window.electron.utils.readPublicFile(
      "electron/into/server-im.js"
    );

    return {
      imVebviewRef,
      data,
      /**
       *
       * @param {HTMLElement} el
       */
      setImVebviewRef(el) {
        if (el && !imVebviewRef[el.partition]) {
          imVebviewRef[el.partition] = {
            view: el,
          };
          el.addEventListener("ipc-message", (event) => {
            if (event.channel === "totalUnreadCount") {
              $store.commit("common/setServerMessageCount", event.args[0]);
            }
          });
          el.addEventListener("dom-ready", () => {
            el.setAudioMuted(true);
            el.insertCSS(css);
            el.executeJavaScript(js);
            // el.openDevTools();
          });
          // el.addEventListener("did-stop-loading", function (e) {});
        }
      },
    };
  },
});
</script>
